<template>
  <el-main>
    <el-table
        :data="productList">
      <el-table-column
          prop="title"
          label="名称"
          width="480">
      </el-table-column>
      <el-table-column
          prop="price"
          label="价格"
          width="150">
      </el-table-column>
      <el-table-column
          label="数量"
          width="200">
        <template slot-scope="scope">
          <el-input-number v-model="scope.row.num" @change="handleChange(scope.row)" :min="0" :max="10" label="描述文字"></el-input-number>
        </template>
      </el-table-column>
      <el-table-column
          prop="total"
          label="小计"
          width="150">
      </el-table-column>
      <el-table-column
          prop="ownSpec"
          label="规格"
          width="240">
        <template slot-scope="scope">
          <span v-for="(v,k) in JSON.parse(scope.row.ownSpec)">{{v}}</span>
        </template>
      </el-table-column>
      <el-table-column
          label="操作"
          width="150">
        <template slot-scope="scope">
          <el-button @click="del(scope.row.id)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-row >
      <div>总计：{{total}}</div>
    </el-row>


  </el-main>
</template>

<script>
export default {
  name: "ProuctDetail",
  data() {
    return {
      total: 0,
      productList: [],
    };
  },
  methods: {
    handleChange(row) {
      this.axios.get('/cart/cart/add', {params: {productId: row.id, num: row.num, from: 'cart'}}).then(res => {
        this.myCart();
      });
    },
    del(id) {
      this.axios.get('/cart/cart/del', {params: {productId: id}}).then(res => {
        this.myCart();
        this.$message.success("删除成功");
      });
    },
    myCart() {
      this.axios.get('/cart/cart/my').then(res => {
        this.productList = res.data.data.productList;
        this.total = res.data.data.total;
      });
    }

  },
  mounted() {
    this.myCart();
  }
};
</script>

<style scoped>

</style>